<template>
  <div class="search-bar">
    <div class="search-bar-wrapper" @click="onSearchBarClick">

      <van-icon
        name="search"
        color="#858C96"
        class="clear"
        size="16px"
      />
      <input
        class="search-input"
        type="text"
        :disabled="disabled"
        :focus="focus"
        :maxlength="limit"
        :placeholder="hotSearch === '' ? '搜索' : hotSearch"
        v-model="searchWord"
        @input="onChange"
        confirm-type="search"
        @confirm="onConfirm"
      >
      <van-icon
        v-if="searchWord.length>0"
        name="clear"
        color="#858C96"
        class="search"
        @click="onClearClick"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: 'index',
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    focus: {
      type: Boolean,
      default: false
    },
    limit: {
      type: Number,
      default: 50
    },
    hotSearch: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      searchWord: ''
    }
  },
  methods: {
    // 搜索框点击事件
    onSearchBarClick () {
      this.$emit('onCLick')
    },
    // 点击清空事件
    onClearClick () {
      this.searchWord = ''
      this.$emit('onClear')
    },
    // 输入监听事件
    onChange (e) {
      const {value} = e.mp.detail
      this.$emit('onChange', value)
    },
    // 点击虚拟键盘搜索事件
    onConfirm (e) {
      const {value} = e.mp.detail
      this.$emit('onConfirm', value)
    },
    // 对输入框关键字赋值
    setValue (v) {
      this.searchWord = v
    },
    // 获取输入框的关键字
    getValue () {
      return this.searchWord
    }
  }
}
</script>

<style lang="stylus" scoped>
.search-bar
  padding 15px;

  .search-bar-wrapper
    display flex;
    background-color #f5f7f9;
    border-radius 40px;

    .search-input
      width 100%;
      height 40px;
      line-height 40px;
      color #666666;
      font-size 14px;

    .clear, .search {
      margin-left 16.3px;
      margin-right 10px;
    }

</style>
